1 files changed, 100 insertions, 0 deletions

diff --git a/src/pages/releases/[version].tsx b/src/pages/releases/[version].tsx
new file mode 100644
index 0000000..84d807a
--- /dev/null
+++ b/src/pages/releases/[version].tsx
@@ -0,0 +1,100 @@
+import { Page, PipelineStageError } from "corvos";
+
+import { strapiLoader } from "$/deps/strapi.tsx";
+import { releaseStrapiSchema } from "$/schemas/releases.ts";
+import { BaseLayout } from "$/ui/base/BaseLayout.tsx";
+import { ReleaseCard } from "$/ui/components/ReleaseCard.tsx";
+import { SiteHeader } from "$/ui/components/SiteHeader.tsx";
+import { CardList } from "$/ui/layouts/CardList.tsx";
+import { Container } from "$/ui/layouts/Container.tsx";
+import { HList } from "$/ui/layouts/HList.tsx";
+import { ActionButton } from "$/ui/objects/ActionButton.tsx";
+import { Badge } from "$/ui/objects/Badge.tsx";
+import { Body } from "$/ui/objects/Body.tsx";
+import { Divider } from "$/ui/objects/Divider.tsx";
+import { Heading } from "$/ui/objects/Heading.tsx";
+import { Icon } from "$/ui/objects/Icon.tsx";
+import site from "@/corvos.config.ts";
+
+export const pages = site.$.pageGenerator(async function* () {
+        for await (const item of strapiLoader.loadCollection("corvos-releases", releaseStrapiSchema, {
+                "populate[0]": "files",
+                "sort[0]": "date:desc",
+        })) {
+                if (item instanceof PipelineStageError) {
+                        yield item;
+                } else {
+                        yield new Page(".strapi", item.notes ?? [], {
+                                ...item,
+                                title: `Corvos ${item.version}`,
+                                type: "release" as const,
+                        });
+                }
+        }
+});
+
+export const template = site.$.template({ type: "release" }, (page, pages) => {
+        const query = site.$.query(pages);
+
+        const feed = query.type(".rss").match({ type: "releases" }).one();
+
+        const prev = query.type(".html").match({ type: "release" }).prev(page);
+        const next = query.type(".html").match({ type: "release" }).next(page);
+
+        return (
+                <BaseLayout page={page}>
+                        <SiteHeader
+                                mode="compact"
+                                url={page.url}
+                                end={
+                                        <div class="l-media__block">
+                                                <ActionButton
+                                                        align-block
+                                                        class="u-mbs-0"
+                                                        href={feed.url}
+                                                        icon={<Icon icon="rss-simple" variant="bold" />}
+                                                        level="quiet"
+                                                        pill
+                                                        title="RSS Feed"
+                                                />
+                                        </div>
+                                }
+                        >
+                                <div class="l-media__block l-media__block--main">
+                                        <Heading class="u-mbs-0 u-elp">{page.data.title}</Heading>
+                                </div>
+                        </SiteHeader>
+
+                        <Container as="main" class="u-mbs-neutralize h-entry" fixed="150" pad-block pad-inline>
+                                <HList aria-label="Categories">
+                                        <li>
+                                                <Badge as="strong" pill selected>
+                                                        <time class="dt-published" datetime={page.data.date.toISOString()}>
+                                                                {page.data.date.toLocaleDateString(undefined, {
+                                                                        day: "numeric",
+                                                                        month: "short",
+                                                                        year: "numeric",
+                                                                })}
+                                                        </time>
+                                                </Badge>
+                                        </li>
+                                </HList>
+
+                                <Heading as="h1" class="u-mbs-200 p-name" display highlight level="xxl">
+                                        {page.data.title}
+                                </Heading>
+
+                                <Body class="e-content">{{ __html: page.content }}</Body>
+                        </Container>
+
+                        <Divider level="faint" />
+
+                        <Container as="footer" class="u-mbs-neutralize" fixed="150" pad-block pad-inline>
+                                <CardList layout="grid">
+                                        {prev && <ReleaseCard heading-level="h2" page={prev} list />}
+                                        {next && <ReleaseCard heading-level="h2" page={next} list />}
+                                </CardList>
+                        </Container>
+                </BaseLayout>
+        );
+});